<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>hello</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/bootstrap.min.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<%--     <img alt="图片" src="<%=request.getContextPath() %>/image/img1.png" /> --%>
<script>

var path ="<%=request.getContextPath() %>"

</script>
<style type="text/css">
body {
	padding-top: 50px;
}

.carousel {
	height: 500px;
	background-color: #000;
	margin-bottom: 60px;
}

.carousel .item {
	height: 500px;
	background-color: #000;
}

.carousel img {
	width: 100%;
}

.carousel-caption p {
	margin-bottom: 20px;
	font-size: 20px;
	line-height: 1.8;
}

#sum_cont .col-md-4 {
	text-align: center;
}

hr.divider {
	margin: 40px 0;
}

.featrue {
	padding: 30px 0;
}

.featrue-head {
	font-size: 50px;
	color: #1b6d85;
	margin-top: 100px;
}

.featrue-head .text-muted {
	font-size: 28px;
	color: #777777;
}

#ply {
	width: 330px;
	height: 86px;
	position: fixed;
	top: 50px;
	right: 3px;
	opacity: 0.75;
}
</style>
</head>

<body>
	<!----
* navbar-fixed-top : 导航条置顶
* navbar-inverse : 颜色反转
---->
	<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">主页</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">Dropdown <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">One more separated link</a></li>
					</ul></li>
			</ul>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="查询">
				</div>
				<button type="submit" class="btn btn-default">查询</button>
			</form>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">注册</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li>1212</li>
			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container-fluid --> </nav>

	<div id="myCarousel" class="carousel slide">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
			<li data-target="#myCarousel" data-slide-to="3"></li>
		</ol>
		<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<div class="item active">
				<img src="<%=request.getContextPath() %>/img/chrome-big.jpg" alt="First slide">
				<div class="carousel-caption">
					<h1>Chrome</h1>
					<p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求</p>
					<a class="btn btn-lg btn-primary"
						href="http://tieba.baidu.com/f?kw=chrome&fr=ala0&tpl=5"
						target="_blank">点我下载</a>
				</div>
			</div>
			<div class="item">
				<img src="<%=request.getContextPath() %>/img/firefox-big.jpg" alt="Second slide">
				<div class="carousel-caption">
					<h1>Firefox</h1>
					<p>Firefox 击败其它浏览器荣获“速度之王”！无论是专业测速还是您的日常操作，Firefox 都将给您最快的浏览体验。</p>
					<a class="btn btn-lg btn-primary"
						href="http://www.firefox.com.cn/download/" target="_blank">点我下载</a>
				</div>
			</div>
			<div class="item">
				<img src="<%=request.getContextPath() %>/img/ie-big.jpg" alt="Third slide">
				<div class="carousel-caption">
					<h1>Microsoft Edge</h1>
					<p>体验 Windows 10 这一全新 Web 浏览器。
						在网页上书写、更快速地搜索和不受干扰地阅读，所有这些都不用离开页面。</p>
					<a class="btn btn-lg btn-primary"
						href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie"
						target="_blank">点我下载</a>
				</div>
			</div>
			<div class="item">
				<img src="<%=request.getContextPath() %>/img/safari-big.jpg" alt="Firefox">
				<div class="carousel-caption">
					<h1>Safari</h1>
					<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
					<a class="btn btn-lg btn-primary"
						href="https://extensions.apple.com/" target="_blank">点我下载</a>
				</div>
			</div>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel" data-slide="prev"
			role="button"> <!--向左的箭头--> <span
			class="glyphicon glyphicon-chevron-left"></span>
		</a> <a class="carousel-control right" href="#myCarousel"
			data-slide="next" role="button"> <!--向右的箭头--> <span
			class="glyphicon glyphicon-chevron-right"></span>
		</a>
	</div>
	<div class="container" id="sum_cont">
		<div class="row">
			<div class="col-md-4">
				<img class="img-circle" src="<%=request.getContextPath() %>/img/chrome-logo-small.jpg"
					alt="chrome">
				<h2>Chrome</h2>
				<p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求</p>
				<p>
					<a class="btn btn-default"
						href="http://tieba.baidu.com/f?kw=chrome&fr=ala0&tpl=5"
						target="_blank" role="button">点我下载</a>
				</p>
			</div>
			<div class="col-md-4">
				<img class="img-circle" src="<%=request.getContextPath() %>/img/firefox-logo-small.jpg"
					alt="Firefox">
				<h2>Firefox</h2>
				<p>Firefox 击败其它浏览器荣获“速度之王”！无论是专业测速还是您的日常操作，Firefox 都将给您最快的浏览体验。</p>
				<p>
					<a class="btn btn-default"
						href="http://www.firefox.com.cn/download/" target="_blank"
						role="button">点我下载</a>
				</p>
			</div>
			<div class="col-md-4">
				<img class="img-circle" src="<%=request.getContextPath() %>/img/safari-logo-small.jpg"
					alt="chrome">
				<h2>Safari</h2>
				<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
				<p>
					<a class="btn btn-default" href="https://extensions.apple.com/"
						target="_blank" role="button">点我下载</a>
				</p>
			</div>
		</div>
		<hr class="divider">

		<ul class="nav nav-tabs" role="tablist">
			<li class="active"><a href="#bro_chrome" role="tab"
				data-toggle="tab">Chrome</a></li>
			<li><a href="#bro_firefox" role="tab" data-toggle="tab">FireFox</a></li>
			<li><a href="#bro_safari" role="tab" data-toggle="tab">Safari</a></li>
		</ul>
		<div class="tab-content">

			<div class="tab-pane active" id="bro_chrome">
				<div class="row featrue">
					<div class="col-md-7 featrue-head">
						<h2>
							chrome<span class="text-muted">页面调试方便,适合开发人员使用</span>
						</h2>
						<p class="lead">Google
							Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求</p>
					</div>
					<div class="col-md-5">
						<img class="img-responsive" alt="chrome"
							src="<%=request.getContextPath() %>/img/chrome-logo.jpg">
					</div>
				</div>
			</div>
			<div class="tab-pane" id="bro_firefox">
				<div class="row featrue">
					<div class="col-md-7">
						<img class="img-responsive" alt="firefox"
							src="<%=request.getContextPath() %>/img/firefox-logo.jpg">
					</div>
					<div class="col-md-5 featrue-head">
						<h2>
							Firefox<span class="text-muted">js响应速度快</span>
						</h2>
						<p class="lead">Firefox
							击败其它浏览器荣获“速度之王”！无论是专业测速还是您的日常操作，Firefox 都将给您最快的浏览体验。</p>
					</div>
				</div>
			</div>
			<div class="tab-pane" id="bro_safari">
				<div class="row featrue">
					<div class="col-md-7 featrue-head">
						<h2>
							Safari<span class="text-muted">果粉首选</span>
						</h2>
						<p class="lead">Safari，是苹果计算机的最新操作系统Mac OS
							X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
					</div>
					<div class="col-md-5">
						<img class="img-responsive" alt="safari"
							src="<%=request.getContextPath() %>/img/safari-logo.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>


	<div id="ply">
<!-- 		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" -->
<!-- 			width=330 height=86 -->
<!-- 			src="http://music.163.com/outchain/player?type=2&id=33941662&auto=1&height=66"> -->
<!-- 		</iframe> -->
	</div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="<%=request.getContextPath() %>/js/bootstrap/bootstrap.min.js"></script>
	<script type="text/javascript">
		
	</script>
</body>

</html>
